import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
//弹窗提示
/*
这段代码的作用是 创建一个基于 axios 的 HTTP 请求客户端，并添加统一的请求/响应拦截处理 ，主要用于 Vue/Element-Plus 项目的 API 调用

 */
//(1) 创建 axios 实例
const request = axios.create({
    baseURL: 'http://localhost:9999', // 服务端接口基础地址（注意：协议部分应为 http: 或 https:）
    timeout: 30000 // 请求超时时间（30秒）
})

//request 拦截器
//可以自请求发送对请求做一些处理
/*
作用 ：在请求发送前统一设置请求头：
强制所有请求使用 application/json 格式提交数据。
可扩展性：可在此处添加 token 认证、请求参数加密等逻辑。
 */
request.interceptors.request.use(config => {
  config.headers['Content-Type']='application/json;charset=utf-8';
  let user = JSON.parse(localStorage.getItem('code2025_user') || '{}');
  config.headers['token'] = user.token
  return config
},error => {
   return Promise.reject(error)
});

//response 拦截器
//可以在接口响应后统一处理结果
/*
响应处理 ：
自动解析字符串格式的响应数据为 JSON 对象。
直接返回 response.data，省去后续代码中手动获取数据的步骤。
错误处理 ：
404 错误 ：提示 "未找到请求接口"。
500 错误 ：提示后端系统异常。
其他错误 ：控制台输出错误信息，便于调试。
 */
request.interceptors.response.use(
    response=>{
        let res = response.data;
        //兼容服务端返回的字符串数据
        if(typeof res === 'string'){
            res = res?JSON.parse(res):res
        }
        if(res.code === '401'){
            ElMessage.error(res.msg)
            router.push('/login')
        }else{
            return res
        }

    },
    error => {
        if(error.response.status === 404){
            ElMessage.error("未找到请求接口")
        }else if(error.response.status===500) {
            ElMessage.error("系统异常,请查看后端控制台报错")
        }else{
            console.error(error.message)
        }
        return Promise.reject(error)
    }
)

export default request